<template>
  <div>
    <h2>{{ $store.state.counter }}</h2>
    <h2>{{ $store.state.username }}</h2>
    <h2>地址: {{ showAddress }}</h2>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
    <button @click="getUsername">获取用户名</button>
    <button @click="getAddress">获取地址</button>
    <input type="text" v-model="address.province" />
    <input type="text" v-model="address.city" />
    <input type="text" v-model="address.county" />

    <h2>{{ testVuexValue }}</h2>
    <button @click="changeTestVuexValue">testVuexValue</button>
    <button @click="testVuexValue++">testVuexValue++</button>
    <hr />

    <home></home>
  </div>
</template>

<script>
let [head, ...tail] = [1, 2, 3, 4];
let { ...obj } = { a: "pengfan", b: "pengyutong", c: "qingtian" };

let obj1 = { address: "成都", hobby: "游泳" };
let obj2 = obj1;
obj2.hobby = "打篮球";

let names = "counter";
let m = {
  [names]() {
    console.log("javascript的基础太差会出事");
  },
};

import Home from "./pages/Home.vue";
export default {
  name: "App",
  data() {
    return {
      address: { province: "", city: "", county: "" },

      testVuexValue: 18,
    };
  },
  components: { Home },
  computed: {
    showAddress() {
      let address = this.$store.state.address;
      if (address) {
        return `${address.province}-${address.city}-${address.county}`;
      }
    },
  },
  methods: {
    increment() {
      this.$store.commit("increment");
    },
    decrement() {
      this.$store.commit("decrement");
    },
    getUsername() {
      this.$store.commit("setUsername", "pengfan");
    },
    getAddress() {
      this.$store.commit("setAddress", { ...this.address });
    },
    changeTestVuexValue() {
      this.$store.commit("setTestVuexValue", this.testVuexValue);
    },
  },
};
</script>

<style>
</style>
